<template>
	<div class="main">
		<div class="Header">
			<div class="Header-content">
				<div class="Header-Logo"></div>
				<div class="Header-navBar">
					<ul class="Header-navList">
						<li class="Header-navList-item"><router-link to="/">首页</router-link></li>
						<li class="Header-navList-item"><a>我的关注</a></li>
						<li class="Header-navList-item"><router-link to="/shortvideo">短视频</router-link></li>
						<li class="Header-navList-item"><a>直播</a></li>
						<li class="Header-navList-item"><a>同城</a></li>
						<li class="Header-navList-item"><router-link to="/longvideo">长视频</router-link></li>
						<li class="Header-navList-item tscolor"><router-link to="/theater">小剧场</router-link></li>
						<li class="Header-navList-item"><router-link to="/movie">电影</router-link></li>
						<li class="Header-navList-item"><a>AcFun</a></li>
					</ul>
				</div>
				<div class="Header-search">
					<input
						type="text"
						placeholder="请输入你要搜索的内容"
						class="Header-search-input"
					/>
					<button class="Header-search-button">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-sousuo"></use>
						</svg>
						搜索
					</button>
				</div>
				<div class="Header-Login">
					<ul class="Header-Login-list">
						<li class="Header-Login-item">
							<div class="Header-Login-div">
								<a>
									<svg class="icon" aria-hidden="true">
										<use xlink:href="#icon-shangchuanshipin"></use>
									</svg>
									<span class="Header-Login-span">上传视频</span>
								</a>
							</div>
						</li>
						<li class="Header-Login-item">
							<div class="Header-Login-div">
								<a>
									<svg class="icon" aria-hidden="true">
										<use xlink:href="#icon-chongzhi"></use>
									</svg>
									<span class="Header-Login-span">快币充值</span>
								</a>
							</div>
						</li>
						<li class="Header-Login-item">
							<a>
								<div class="Header-Login-user" @click="dengluGo" v-if="!cateGoryStore.nickname">登录</div>
								<div class="denglugo" v-else>
								<img :src="cateGoryStore.avatarUrl"/>
								<p>{{cateGoryStore.nickname}}</p>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="navigation-bar">
				<div class="navigation-content">
					<ul class="navigation-list">
						<li class="Navigation-item active">精选</li>
						<li class="Navigation-item">短剧</li>
						<li class="Navigation-item">二次元</li>
						<li class="Navigation-item">生活</li>
					</ul>
				</div>
			</div>
		</div>
		<Login v-model:visible="visible" title="登录">
		<div class="user">手机号:</div><ElInput v-model="user"/>
		<div  class="password">密码:</div><ElInput v-model="password" show-password/>
    <template #footer>
		<ElButton type="primary" @click="LoginGo(user,password)">确定</ElButton>
			<ElButton type="danger" @click="remove">取消</ElButton>
    </template>
		</Login>
	</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
	name: "Header",
});
</script>

<script lang="ts" setup>
import {ref,onMounted} from 'vue';
import Login from '@/views/Login/index.vue'
import { LoginApi } from "@/api/Login";
import {ElInput,ElButton,ElMessage} from 'element-plus';
import {useCategoryStore} from '@/store/modules/Login';
const visible=ref<boolean>(false);
const user=ref<string>('');
const password=ref<string>('');
const isShow=ref<boolean>(true);
const cateGoryStore=useCategoryStore();
const dengluGo=()=>{
	visible.value=true;
}
const remove=()=>{
	visible.value=false;
}
const LoginGo=(phone:string,password:string)=>{
	cateGoryStore.LoginApi(phone,password)
	visible.value=false;
	//  .then((res)=>{
	// 	 console.log(res);
	// 	  if(res.code===200){
	// 	 	ElMessage({
  //       message: '登录成功',
  //        type: 'success',
  //      })
	// 		 localStorage.setItem('token',JSON.stringify(res.token));
	// 		 localStorage.setItem('user',JSON.stringify(res))
	// 		 visible.value=false;
	// 		 result.value=res;
	// 		 }
	// }).catch((res)=>{
	// 	console.log(res);
	// 		ElMessage({
  //       message: res,
  //        type: 'error',
  //      })
	// })
	
}
onMounted(()=>{

})
</script>
<style lang="less">
.main {
	.el-input{
		display:inline-block;
		 width: 74%;
	}
	.user{
		display: inline-block;
		margin-right: 20px;
		margin-bottom: 50px;
	}
	.password{
	display: inline-block;
		margin-right: 33px;
	}
	.el-icon svg {
    height: 3em;
    width: 1em;
}
	position: relative;
	min-width: 1366px;
	.Header {
		width: 100%;
		height: 70px;
		min-width: 1366px;
		position: fixed;
		background: #222;
		top: 0;
		z-index: 999;
		.Header-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 70px;
			margin: 0 auto;
		width: 1484.06px;
			.Header-Logo {
				width: 81px;
				height: 31px;
				background-image: url("./image/ksLogo.png");
				background-size: 81px 31px;
				margin-left: 45px;
			}
			.Header-navBar {
				display: flex;
				flex: 1;
				.Header-navList {
					display: flex;
					width: 100%;
					list-style-type: none;
					margin: 0px;
					padding: 0px;
					.Header-navList-item {
						color: hsla(0, 0%, 100%, 0.8);
						margin-left: 30px;
						font-weight: bolder;
						font-size: 13px;
						cursor: pointer;
							.router-link-active {
						text-decoration: none;
					}
					}
					.tscolor {
						color: #fe3666;
					}
					a:hover {
						color: #fe3666;
					}
					a{
							text-decoration: none;
								color: hsla(0, 0%, 100%, 0.8);
					}
				}
			}
			.Header-search {
				width: 391px;
				flex-basis: auto;
				margin-right:16px;
				margin-left: 17px;
				display: flex;
				.Header-search-input {
					border: none;
					background: hsla(0, 0%, 100%, 0.1);
					width: 100%;
					line-height: 42px;
					padding: 0 24px;
					border-top-left-radius: 999px;
					border-bottom-left-radius: 999px;
					outline: none;
					overflow: visible;
					color: hsla(0, 0%, 100%, 0.8);
					font-size: 14px;
				}
				.Header-search-input::-webkit-input-placeholder {
					font-size: 14px;
					color: hsla(0, 0%, 100%, 0.8);
				}
				.Header-search-button {
					display: flex;
					align-items: center;
					justify-content: center;
					border: none;
					width: 88px;
					min-width: 88px;
					height: 44px;
					border-top-right-radius: 999px;
					border-bottom-right-radius: 999px;
					font-size: 16px;
					font-weight: 400;
					cursor: pointer;
					transition: background-color 0.15s ease-in-out;
					background-color: #fe3666;
					color: #fff;
				}
			}
			.Header-Login {
				display: flex;
				.Header-Login-list {
					display: flex;
					.Header-Login-item {
						position: relative;
						display: flex;
						margin: 0 15px;
						align-items: center;
						cursor: pointer;
						.denglugo{
							display: flex;
							align-items: center;
							justify-content: center;
							img{
								width:30px;
								border-radius:50%;
							}
							p{
								font-size: 14px;
								color: #fff;
							}
						}
						.Header-Login-user {
							padding: 12.5px 24px;
							background-color: #eb3661;
							color: #fff;
							font-size: 18px;
							font-family: PingFangSC, PingFangSC-Medium;
							font-weight: 500;
							line-height: 18px;
							border-radius: 21px;
							cursor: pointer;
							text-align: center;
						}
						a {
							text-decoration: none;
							display: flex;
							flex-direction: column;
							align-items: center;
							.Header-Login-span {
								font-size: 14px;
								opacity: 0.8;
							}
						}
						.Header-Login-div {
							display: flex;
							flex-direction: column;
							align-items: center;
							color: #fff;
							a:hover {
								color: #fe3666;
							}
						}
					}
				}
			}
		}
		.navigation-bar {
			width: 100%;
			height: 42px;
			min-height: 42px;
			position: sticky;
			top: 69px;
			opacity: 0.9;
			background: #222;
			z-index: 9;
			.navigation-content {
				height: 100%;
				width: 1200px;
				margin: 0 auto;
				.navigation-list {
					list-style-type: none;
					margin: 0px;
					padding: 0px;
					height: 100%;
					display: flex;
					.Navigation-item {
						color: #fff;
						font-size: 14px;
						font-family: PingFangSC, PingFangSC-Semibold;
						font-weight: 600;
						height: 100%;
						line-height: 42px;
						margin-right: 20px;
					}
					.active {
						border-bottom: 1px solid #fe3666;
						color: #fe3666;
					}
				}
			}
		}
	}
}
</style>
